// 路由器模块
// 路由组件是在路由器模块当中进行注册
// 路由器管理路由组件
// 路由器router只需要注册一次即可
// 不断的注册路由组件route
import Vue from "vue";
import VueRouter from "vue-router";

// 路由懒加载
/* const Home = ()=>import('@/pages/Home.vue');
const Cate = ()=>import('@/pages/Cate.vue');
const Search = ()=>import('@/pages/Search.vue');
const My = ()=>import('@/pages/My.vue'); */


// 声明使用vue插件
Vue.use(VueRouter);
export default new VueRouter({
    mode:"hash",//模式 路径后面 #
    // mode:"history",// 不加#
    routes:[//routes注册路由组件
        {
            path:'/home',//路径 /  
            name:'home',//路由组件的名字
            component:()=>import('@/pages/Home.vue')
        },
        {
            path:'/cate',
            name:"cate",
            component:()=>import('@/pages/Cate.vue')
        },
        {
            path:'/search',
            name:'search',
            component:()=>import('@/pages/Search.vue')
        },
        {
            path:'/my',
            name:'my',
            component:()=>import('@/pages/My.vue')
        }
    ]
})


/* 
hash和history模式是否一样
hash 在路径当中多了个#
history在路径当中没有#
开发模式下除了#有区别其他无区别
生产环境下
hash 在url当中有#符号 但是http请求当中不会发送它 ，对后端没有影响 就不会覆盖后台的接口 也不会返回404
history 不加#，
1.底层通过history对象（历史记录） pushState() replaceState() go black forward
2.前端的url必须和实际的后端请求url一致，如果有对应的路由进行处理，返回响应，就会产生覆盖，如果没有对应的路由进行处理 报404错误
3.所有如果生产环境使用history模式，服务器需要特殊配置


前端路由
后端路由
不一样，
前端路由页面不刷新，页面跳转切换，是路由组件的切换 
(SPA是单页面应用)
后端路由 浏览器的地址不断的变化，每次变化都需要向后端服务器发送请求，服务器返回响应，浏览器刷新重新渲染页面，网速慢 ，白屏 用户体验差

前端路由的优点
优点：
1.用户体验好，跟网速没关系，不需要每次都从服务器获取数据，可以快速展现给用户
2.实现了前后端分离，分别开发
3.很多前端框架都有路由功能

缺点：
1.单页面应用无法记住查看位置



为何要实现路由懒加载  代码分割（code-split）
如果没有使用路由懒加载 打包后的文件会异常大，造成的现象进入首页  需要的内容多时间长 有可能会白屏 即使使用了loading也是不利于用户体验，运用路由懒加载将页面划分，需要时进行加载，这样可以有效的分担加载的压力 减少首页加载用的时间




*/